// src/components/Shop.tsx
import { Button, Col, Empty, Row, Space } from 'antd'
import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { filterProduct } from '../../store/actions/product.action'
import { AppState } from '../../store/reducers'
import { ProductState } from '../../store/reducers/product.reducer'
import CheckBox from './CheckBox'
import Layout from './Layout'
import ProductItem from './ProductItem'
import RadioBox from './RadioBox'

const Shop = () => {
    const dispatch = useDispatch()

    const [skip, setSkip] = useState<number>(0)

    // 获取商品数据
    const product = useSelector<AppState, ProductState>(state => state.product)

    // 初始化筛选条件
    const [myFilters, setMyFilter] = useState<{
        category: string[],
        price: number[]
    }>({ category: [], price: [] })

    // 单独监听筛选条件 发生变化则将 skip 清零
    // 这个 useEffect 需要放置在上方 否则无法清零 skip 
    useEffect(() => {
        setSkip(0)
    }, [myFilters])

    // 监听筛选条件和 skip 值 发生变化则重新获取筛选数据
    useEffect(() => {
        dispatch(filterProduct({filters: myFilters, skip}))
    }, [myFilters, skip])

    // 左侧筛选条件
    const filterDom = () => (
        // Space 组件会使内部元素保持间隙  direction="vertical" 纵向
        <Space size="middle" direction="vertical">
            {/* 给 CheckBox 组件传递 handleFilter 方法来修改筛选条件 */}
            <CheckBox
                handleFilter={(filters: string[]) => {
                    setMyFilter({ ...myFilters, category: filters })
                }}
            />
            {/* 给 RadioBox 组件传递 handleFilter 方法来修改筛选条件 */}
            <RadioBox
                handleFilter={(filters: number[]) => {
                    setMyFilter({ ...myFilters, price: filters })
                }}
            />
        </Space>
    )

    // 右侧显示筛选结果
    const productDOM = () => (
        <Row gutter={[16, 16]}>
            {
                product.filter.result.data.map(item => (
                    <Col key={item._id} span="6">
                        <ProductItem product={item} />
                    </Col>
                ))
            }
        </Row>
    )

    // 加载更多商品按钮
    const loadMoreButton = () => {
        return (
            <Row>
            {
                // 当前 limit 为 4 当页显示大于 4 说明还有数据未显示 显示加载更多按钮
                product.filter.result.size >= 4 && (
                    <Button onClick={loadMore}>加载更多</Button>
                )
            }
            </Row>
        )
    }

    // 修改 skip 的值 加载更多数据
    const loadMore = () => {
        setSkip(skip + 4)
    }

    // 没有更多商品提示
    const noData = () => {
        return (
            <Row>
                {/* 当页显示数量为 0 时说明已经全部加载完毕 显示 Empty 组件 */}
                { product.filter.result.size === 0 && <Empty />}
            </Row>
        )
    }
    return (
        <Layout title="拉勾商城" subTitle="">
            <Row>
                <Col span="4">
                    {filterDom()}
                </Col>
                <Col span="20">
                    {productDOM()}
                    {loadMoreButton()}
                    {noData()}
                </Col>
            </Row>
        </Layout>
    )
}

export default Shop